<script setup lang="ts">
	import {computed, ref} from 'vue';
	import CustomPassword from './components/password.vue'
	import CustomMobile from './components/mobile.vue'
	const tabMetas = [
	  { title: '密码登录', subTitle: '验证码登录'},
	  { title: '验证码登录', subTitle: '密码登录'}
	]
	const activeIndex = ref(0)

	const activeMeta = computed(() =>{
	return tabMetas[activeIndex.value]
	})
	const handleChangeLoginType = () => {
	  activeIndex.value =Math.abs (activeIndex.value -1)
	}
</script>
<template>
	<view class="user-login">
		<view class="login-type">
			<view class="title">{{ activeMeta.title }}</view>
			<view @tap="handleChangeLoginType" class="type">
				<text>{{ activeMeta.subTitle }}</text>
				<uni-icons color="#3c3e42" type="forward" />
			</view>
		</view>
		<!-- 密码登录 -->
		<CustomPassword v-if="activeIndex === 0" />
		<!-- 验证码登录 -->
		<CustomMobile v-else />
	</view>
	<!-- 社交账号登录 -->
	<view class="social-login">
		<view class="legend">
			<text class="text">其它方式登录</text>
		</view>
		<view class="social-account">
			<view class="icon">
				<uni-icons color="#00b0fb" size="30" type="qq" />
			</view>
			<view class="icon">
				<uni-icons color="#fb6622" size="30" type="weibo" />
			</view>
			<view class="icon">
				<uni-icons color="#07C160" size="30" type="weixin" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
